<template>
  <div class="statistics-report">
    <SearchForm
      v-show="showSearch"
      v-model="searchParams"
      @search="handleSearch"
      @reset="handleReset"
      :showExport="true"
      exportFileName="学生花名册"
      @export="handleExport"
    />

    <!-- 统计报表内容 -->
    <el-card class="report-card">
      <div class="report-header">
        <h2 class="report-title">学生花名册</h2>
        <p class="report-subtitle">
          总人数: <span class="highlight-number">{{ totalCount }}</span>
        </p>
      </div>

      <!-- 操作栏 -->
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          v-model:showSearch="showSearch"
          @queryTable="loadStatistics"
          :columns="columns"
        ></right-toolbar>
      </el-row>

      <!-- 一维表格 -->
      <div class="table-container" v-loading="loading">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          :height="isPhone ? '500px' : 'calc(100vh - 500px)'"
        >
          <!-- 基本信息 -->
          <el-table-column v-if="columns[0].visible" label="序号" width="60" align="center">
            <template #default="{ row, $index }">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[1].visible"
            prop="nickName"
            label="姓名"
            width="100"
            align="center"
          />
          <el-table-column v-if="columns[2].visible" prop="sex" label="性别" width="80" align="center">
            <template #default="{ row }">
              {{ getSexText(row.sex) }}
            </template>
          </el-table-column>
          <!-- 工程博士信息 -->
          <el-table-column
            v-if="columns[3].visible"
            prop="trainStartDate"
            label="工程硕博士入学时间"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[4].visible"
            prop="trainField"
            label="工程硕博士培养领域"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{ getTrainFieldText(row.trainField) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[5].visible"
            prop="trainType"
            label="工程博士培养类别"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{ getTrainTypeText(row.trainType) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[6].visible"
            prop="trainUniversity"
            label="工程博士高校名称"
            width="150"
            align="center"
          >
            <template #default="{ row }">
              {{ getUniversityName(row.trainUniversity) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[7].visible"
            prop="trainCollege"
            label="工程博士学院名称"
            width="150"
            align="center"
          />
          <el-table-column
            v-if="columns[8].visible"
            prop="trainMajor"
            label="工程博士培养专业"
            width="120"
            align="center"
          />
          <el-table-column v-if="columns[9].visible" prop="nation" label="民族" width="80" align="center">
            <template #default="{ row }">
              {{ getNationText(row.nation) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[10].visible"
            prop="idCard"
            label="身份证号"
            width="180"
            align="center"
          />
          <el-table-column
            v-if="columns[11].visible"
            prop="phonenumber"
            label="手机号码"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[12].visible"
            prop="email"
            label="邮箱"
            width="180"
            align="center"
          />
          <el-table-column
            v-if="columns[13].visible"
            prop="origin"
            label="籍贯"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[14].visible"
            prop="political"
            label="政治面貌"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              {{ getPoliticalText(row.political) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[15].visible"
            prop="birthday"
            label="出生日期"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{ getBirthdayFromIdCard(row.idCard) }}
            </template>
          </el-table-column>
          <el-table-column v-if="columns[16].visible" prop="age" label="年龄" width="100" align="center">
            <template #default="{ row }">
              {{ getAgeFromIdCard(row.idCard) }}
            </template>
          </el-table-column>

          <!-- 紧急联系人 -->
          <el-table-column
            v-if="columns[17].visible"
            prop="emergencyContact"
            label="紧急联系人"
            width="120"
            align="center"
            class-name="highlight-column"
          />
          <el-table-column
            v-if="columns[18].visible"
            prop="emergencyPhonenumber"
            label="紧急联系人联系方式"
            width="150"
            align="center"
            class-name="highlight-column"
          />

          <!-- 本科信息 -->
          <el-table-column
            v-if="columns[19].visible"
            prop="graduateUniversity"
            label="本科毕业高校名称"
            width="150"
            align="center"
          >
            <template #default="{ row }">
              {{ getUniversityName(row.graduateUniversity) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[20].visible"
            prop="graduateCollege"
            label="本科毕业学院名称"
            width="150"
            align="center"
          />
          <el-table-column
            v-if="columns[21].visible"
            prop="graduateMajor"
            label="本科专业"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[22].visible"
            prop="graduateStartEnd"
            label="本科毕业时间"
            width="120"
            align="center"
          />

          <!-- 研究生信息 -->
          <el-table-column
            v-if="columns[23].visible"
            prop="masterUniversity"
            label="研究生毕业高校名称"
            width="150"
            align="center"
          >
            <template #default="{ row }">
              {{ getUniversityName(row.masterUniversity) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[24].visible"
            prop="masterCollege"
            label="研究生毕业学院名称"
            width="150"
            align="center"
          />
          <el-table-column
            v-if="columns[25].visible"
            prop="masterMajor"
            label="研究生专业"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[26].visible"
            prop="masterStartEnd"
            label="研究生毕业时间"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[27].visible"
            prop="graduateEducationSystem"
            label="研究生学制"
            width="100"
            align="center"
          />

          <!-- 工程博士信息 -->
          <el-table-column
            v-if="columns[28].visible"
            prop="trainStartEnd"
            label="工程硕博士计划毕业时间"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[29].visible"
            prop="trainDeptName"
            label="培养单位"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[30].visible"
            prop="practiceDeptName"
            label="实践部门"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[31].visible"
            prop="practiceAddress"
            label="实践地点"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{ getAddressText(row.practiceAddress) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[32].visible"
            prop="joinEntStartDate"
            label="入企实践时间"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{ getDateRange(row.joinEntStartDate, row.joinEntEndDate) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[33].visible"
            prop="joinEntTopicName"
            label="入企实践课题名称"
            width="150"
            align="center"
          />
          <el-table-column
            v-if="columns[34].visible"
            prop="joinEntTopicIntroduction"
            label="入企实践课题简介"
            width="200"
            align="center"
            show-overflow-tooltip
          />

          <!-- 企业导师信息 -->
          <el-table-column
            v-if="columns[35].visible"
            prop="trainEntTeacherUser.nickName"
            label="企业导师姓名"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[36].visible"
            prop="trainEntTeacherUser.deptName"
            label="企业导师单位"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[37].visible"
            prop="trainEntTeacherUser.position"
            label="企业导师职务"
            width="120"
            align="center"
          />
          <el-table-column
            v-if="columns[38].visible"
            prop="trainEntTeacherUser.rank"
            label="企业导师职称"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{ getRankText(row.trainEntTeacherUser?.rank) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[39].visible"
            prop="trainEntTeacherUser.qualification"
            label="企业导师学历"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              {{ getQualificationText(row.trainEntTeacherUser?.qualification) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[40].visible"
            prop="trainEntTeacherUser.phonenumber"
            label="企业导师联系电话"
            width="150"
            align="center"
          />

          <!-- 企业导师助理信息 -->
          <el-table-column
            v-if="columns[41].visible"
            prop="trainEntAssistantUser.nickName"
            label="企业导师助理姓名"
            width="150"
            align="center"
          />
          <el-table-column
            v-if="columns[42].visible"
            prop="trainEntAssistantUser.deptName"
            label="企业导师助理单位"
            width="150"
            align="center"
          />
          <el-table-column
            v-if="columns[43].visible"
            prop="trainEntAssistantUser.position"
            label="企业导师助理职务"
            width="150"
            align="center"
          />
          <el-table-column
            v-if="columns[44].visible"
            prop="trainEntAssistantUser.rank"
            label="企业导师助理职称"
            width="150"
            align="center"
          >
            <template #default="{ row }">
              {{ getRankText(row.trainEntAssistantUser?.rank) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[45].visible"
            prop="trainEntAssistantUser.qualification"
            label="企业导师助理学历"
            width="150"
            align="center"
          >
            <template #default="{ row }">
              {{
                getQualificationText(row.trainEntAssistantUser?.qualification)
              }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[46].visible"
            prop="trainEntAssistantUser.phonenumber"
            label="企业导师助理联系电话"
            width="180"
            align="center"
          />

          <!-- 管理员信息 -->
          <el-table-column
            v-if="columns[47].visible"
            prop="trainOrgUser.nickName"
            label="培养部门管理员姓名"
            width="180"
            align="center"
            class-name="highlight-column"
          />
          <el-table-column
            v-if="columns[48].visible"
            prop="trainOrgUser.position"
            label="培养部门管理员职务"
            width="180"
            align="center"
            class-name="highlight-column"
          />
          <el-table-column
            v-if="columns[49].visible"
            prop="trainOrgUser.phonenumber"
            label="培养部门管理员联系电话"
            width="200"
            align="center"
            class-name="highlight-column"
          />
          <el-table-column
            v-if="columns[50].visible"
            prop="trainDepUser.nickName"
            label="培养单位管理员姓名"
            width="180"
            align="center"
            class-name="highlight-column"
          />
          <el-table-column
            v-if="columns[51].visible"
            prop="trainDepUser.position"
            label="培养单位管理员职务"
            width="180"
            align="center"
            class-name="highlight-column"
          />
          <el-table-column
            v-if="columns[52].visible"
            prop="trainDepUser.phonenumber"
            label="培养单位管理员联系电话"
            width="200"
            align="center"
            class-name="highlight-column"
          />

          <!-- 状态信息 -->
          <el-table-column
            v-if="columns[53].visible"
            prop="trainStatus"
            label="当前处于培养阶段"
            width="150"
            align="center"
            class-name="status-column"
          >
            <template #default="{ row }">
              {{ getTrainStatusText(row.trainStatus) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[54].visible"
            prop="graduateStay"
            label="毕业后是否留在中国一汽工作"
            width="200"
            align="center"
            class-name="status-column"
          >
            <template #default="{ row }">
              {{ getGraduateStayText(row.graduateStay) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[55].visible"
            prop="remark"
            label="备注"
            width="120"
            align="center"
            class-name="status-column"
          />
        </el-table>
        
        <!-- 分页组件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="loadStatistics"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, getCurrentInstance } from "vue";
import SearchForm from "./searchForm.vue";
import {
  getUserDetailStatistics,
  exportUserDetailStatistics,
} from "@/api/statistics";
import { ElMessage } from "element-plus";
import { getRegionTree } from "@/api/common";
import { isPhone } from "@/utils/index";

const { proxy } = getCurrentInstance();

// 搜索参数
const searchParams = ref({});

// 统计数据
const tableData = ref([]);
const regionOptions = ref([]);
const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);

// 查询参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});

// 列显隐配置
const columns = ref([
  { key: 0, label: "序号", visible: true },
  { key: 1, label: "姓名", visible: true },
  { key: 2, label: "性别", visible: true },
  { key: 3, label: "工程硕博士入学时间", visible: true },
  { key: 4, label: "工程硕博士培养领域", visible: true },
  { key: 5, label: "工程博士培养类别", visible: true },
  { key: 6, label: "工程博士高校名称", visible: true },
  { key: 7, label: "工程博士学院名称", visible: true },
  { key: 8, label: "工程博士培养专业", visible: true },
  { key: 9, label: "民族", visible: true },
  { key: 10, label: "身份证号", visible: true },
  { key: 11, label: "手机号码", visible: true },
  { key: 12, label: "邮箱", visible: true },
  { key: 13, label: "籍贯", visible: true },
  { key: 14, label: "政治面貌", visible: true },
  { key: 15, label: "出生日期", visible: true },
  { key: 16, label: "年龄", visible: true },
  { key: 17, label: "紧急联系人", visible: true },
  { key: 18, label: "紧急联系人联系方式", visible: true },
  { key: 19, label: "本科毕业高校名称", visible: true },
  { key: 20, label: "本科毕业学院名称", visible: true },
  { key: 21, label: "本科专业", visible: true },
  { key: 22, label: "本科毕业时间", visible: true },
  { key: 23, label: "研究生毕业高校名称", visible: true },
  { key: 24, label: "研究生毕业学院名称", visible: true },
  { key: 25, label: "研究生专业", visible: true },
  { key: 26, label: "研究生毕业时间", visible: true },
  { key: 27, label: "研究生学制", visible: true },
  { key: 28, label: "工程硕博士计划毕业时间", visible: true },
  { key: 29, label: "培养单位", visible: true },
  { key: 30, label: "实践部门", visible: true },
  { key: 31, label: "实践地点", visible: true },
  { key: 32, label: "入企实践时间", visible: true },
  { key: 33, label: "入企实践课题名称", visible: true },
  { key: 34, label: "入企实践课题简介", visible: true },
  { key: 35, label: "企业导师姓名", visible: true },
  { key: 36, label: "企业导师单位", visible: true },
  { key: 37, label: "企业导师职务", visible: true },
  { key: 38, label: "企业导师职称", visible: true },
  { key: 39, label: "企业导师学历", visible: true },
  { key: 40, label: "企业导师联系电话", visible: true },
  { key: 41, label: "企业导师助理姓名", visible: true },
  { key: 42, label: "企业导师助理单位", visible: true },
  { key: 43, label: "企业导师助理职务", visible: true },
  { key: 44, label: "企业导师助理职称", visible: true },
  { key: 45, label: "企业导师助理学历", visible: true },
  { key: 46, label: "企业导师助理联系电话", visible: true },
  { key: 47, label: "培养部门管理员姓名", visible: true },
  { key: 48, label: "培养部门管理员职务", visible: true },
  { key: 49, label: "培养部门管理员联系电话", visible: true },
  { key: 50, label: "培养单位管理员姓名", visible: true },
  { key: 51, label: "培养单位管理员职务", visible: true },
  { key: 52, label: "培养单位管理员联系电话", visible: true },
  { key: 53, label: "当前处于培养阶段", visible: true },
  { key: 54, label: "毕业后是否留在中国一汽工作", visible: true },
  { key: 55, label: "备注", visible: true },
]);

// 获取字典数据
const {
  university,
  sex,
  nation,
  political,
  specialty,
  training_category,
  train_progress,
  professional_title,
  educational_qualifications,
} = proxy.useDict(
  "university",
  "sex",
  "nation",
  "political",
  "specialty",
  "training_category",
  "train_progress",
  "professional_title",
  "educational_qualifications"
);

// 计算总人数
const totalCount = computed(() => {
  return total.value;
});

const loadRegionData = async () => {
  try {
    const response = await getRegionTree();
    regionOptions.value = response.data;
  } catch (error) {
    console.error("加载地区数据失败:", error);
    proxy.$modal.msgError("加载地区数据失败");
  }
};

// 获取性别文本
const getSexText = (value) => {
  if (!value) return "";
  const item = sex.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取民族文本
const getNationText = (value) => {
  if (!value) return "";
  const item = nation.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取政治面貌文本
const getPoliticalText = (value) => {
  if (!value) return "";
  const item = political.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取培养领域文本
const getTrainFieldText = (value) => {
  if (!value) return "";
  const item = specialty.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取培养类型文本
const getTrainTypeText = (value) => {
  if (!value) return "";
  const item = training_category.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取培养状态文本
const getTrainStatusText = (value) => {
  if (!value) return "";
  const item = train_progress.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取高校名称
const getUniversityName = (value) => {
  if (!value) return "";
  const item = university.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取职称文本
const getRankText = (value) => {
  if (!value) return "";
  const item = professional_title.value?.find((item) => item.value === value);
  return item ? item.label : value;
};

// 获取学历文本
const getQualificationText = (value) => {
  if (!value) return "";
  const item = educational_qualifications.value?.find(
    (item) => item.value === value
  );
  return item ? item.label : value;
};

// 获取实践地址文本
const getAddressText = (value) => {
  if (!value) return "";
  const arr = value.split(",");
  let result = "";
  let list = regionOptions.value;
  for (const item of arr) {
    const region = list.find((info) => info.extId === item);
    if (!region) continue;
    result += region.extName + " ";
    list = region.children;
  }
  return result;
};

// 获取日期范围
const getDateRange = (startDate, endDate) => {
  if (!startDate && !endDate) return "";
  if (startDate && endDate) {
    return `${startDate} - ${endDate}`;
  }
  return startDate || endDate;
};

// 获取毕业留用状态文本
const getGraduateStayText = (value) => {
  if (!value) return "";
  return value === "Y" ? "是" : value === "N" ? "否" : value;
};

// 根据身份证号获取生日
const getBirthdayFromIdCard = (idCard) => {
  if (!idCard || idCard.length !== 18) return "";

  try {
    // 提取出生年月日
    const year = idCard.substring(6, 10);
    const month = idCard.substring(10, 12);
    const day = idCard.substring(12, 14);

    // 验证日期有效性
    const date = new Date(year, month - 1, day);
    if (
      date.getFullYear() != year ||
      date.getMonth() != month - 1 ||
      date.getDate() != day
    ) {
      return "";
    }

    return `${year}-${month}-${day}`;
  } catch (error) {
    console.error("解析身份证号失败:", error);
    return "";
  }
};

// 根据身份证号计算年龄
const getAgeFromIdCard = (idCard) => {
  if (!idCard || idCard.length !== 18) return "";

  try {
    const birthday = getBirthdayFromIdCard(idCard);
    if (!birthday) return "";

    const today = new Date();
    const birthDate = new Date(birthday);

    let age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();

    // 如果还没到生日，年龄减1
    if (
      monthDiff < 0 ||
      (monthDiff === 0 && today.getDate() < birthDate.getDate())
    ) {
      age--;
    }

    return age >= 0 ? age : "";
  } catch (error) {
    console.error("计算年龄失败:", error);
    return "";
  }
};

// 加载统计数据
const loadStatistics = async () => {
  try {
    loading.value = true;

    const params = {
      ...searchParams.value,
      ...queryParams.value,
    };
    
    const res = await getUserDetailStatistics(params);
    if (res.code === 200) {
      tableData.value = res.rows || [];
      total.value = res.total || 0;
    } else {
      ElMessage.error(res.msg || "获取数据失败");
    }
  } catch (error) {
    console.error("加载统计数据失败:", error);
    ElMessage.error("加载统计数据失败，请重试");
  } finally {
    loading.value = false;
  }
};

// 分页处理函数
const handlePagination = () => {
  loadStatistics();
};

// 搜索处理
const handleSearch = () => {
  console.log("搜索参数:", searchParams.value);
  queryParams.value.pageNum = 1; // 搜索时重置到第一页
  loadStatistics();
};

// 重置处理
const handleReset = () => {
  console.log("重置搜索");
  queryParams.value.pageNum = 1; // 重置时重置到第一页
  loadStatistics();
};

// 导出操作
const handleExport = (params) => {
  console.log("导出参数:", params);
  // 返回的是二进制流，需要下载
  exportUserDetailStatistics(params).then((res) => {
    console.log("导出结果:", res);
    try {
      const blob = new Blob([res], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `学生花名册_${new Date().getTime()}.xlsx`;
      a.click();
      ElMessage.success("导出成功");
    } catch (error) {
      console.error("导出失败:", error);
      ElMessage.error(res.msg || "导出失败");
    }
  });
};

// 组件挂载时加载数据
onMounted(() => {
  // loadStatistics();
  loadRegionData();
});
</script>

<style scoped>
.statistics-report {
  padding: 20px;
}

.report-card {
  margin-top: 20px;
}

.mb8 {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-end;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.report-title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin: 0;
}

.report-subtitle {
  font-size: 16px;
  color: #606266;
  margin: 0;
}

.highlight-number {
  color: #409eff;
  font-weight: bold;
  font-size: 1.2em;
}

.table-container {
  margin-top: 20px;
  overflow-x: auto;
}

.total-row {
  font-weight: bold;
  color: #303133;
  background-color: #f5f7fa;
}

/* 表格样式优化 */
:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table th) {
  background-color: #f5f7fa !important;
  color: #606266 !important;
  font-weight: 600;
  text-align: center;
}

:deep(.el-table td) {
  text-align: center;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

:deep(.el-table--border) {
  border: 1px solid #ebeef5;
}

:deep(.el-table--border td) {
  border-right: 1px solid #ebeef5;
}

:deep(.el-table--border th) {
  border-right: 1px solid #ebeef5;
}

/* 高亮列样式 */
:deep(.el-table .highlight-column) {
  background-color: #fff7e6 !important;
}

:deep(.el-table .highlight-column .cell) {
  background-color: #fff7e6 !important;
}

/* 状态列样式 */
:deep(.el-table .status-column) {
  background-color: #fef0f0 !important;
}

:deep(.el-table .status-column .cell) {
  background-color: #fef0f0 !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .table-container {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .statistics-report {
    padding: 10px;
  }

  .report-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .report-title {
    font-size: 20px;
  }

  .report-subtitle {
    font-size: 14px;
  }

  .table-container {
    font-size: 12px;
  }

  :deep(.el-table) {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .report-title {
    font-size: 18px;
  }

  .table-container {
    font-size: 11px;
  }

  :deep(.el-table) {
    font-size: 11px;
  }
}
</style>
